<template>
    <div class="bigshousuo">
    <div class="searchTop">
      <div  @click="$router.go(-1)">
        <img src="../image/fanhui.png" alt="" class="tubiao6" >
      </div>
        <input type="text" placeholder="音乐/歌手" v-model="searchKey" @keydown.enter="enterKey" class="input1">
    </div>
        <div class="history">
            <span class="searchspan">历史:</span>
            <span v-for="item in keyWorldList" :key="item" class="spankey" @click="searchHistory(item)">{{item}}</span>
            <div>
            <img src="../image/shanchu.png" alt="" class="tubiao66" @click="DEL">
        </div>
        </div>
        <table class="itemList">
            
      <!-- @click点击歌曲进行播放传参,,接下来传进去数组更改播放列表                            i是歌曲对应的下标                          把下标传给playlist-->
      <th style="display: flex; justify-content: space-between;" class="item" v-for="(item, i) in searchList" :key="i"
      @click="updateIndex(item)" >
      <td class="leftSpan">{{ i + 1 }}</td>
      <td class="leftname">{{ item.name }}</td>
      <td class="leftsingers">
        <span v-for="(item1, index) in item.ar" :key="index"> {{ item1.name }}</span>
      </td>
      <td style="display: flex; flex-direction: column;">
      </td>
      </th>
    </table>
    </div>
    
</template>
<script>
import{SearchMusic}from "../api/home/api"
export default{
    data(){
        return{
            keyWorldList:[],
            searchKey:"",
            searchList:[],
        };
    },
    mounted(){
        this.keyWorldList= JSON.parse(localStorage.getItem("keyWorldList"))?JSON.parse(localStorage.getItem("keyWorldList")):[]
        
    },
   
    methods:{
        enterKey:async function(){
            if(this.searchKey !==""){
                this.keyWorldList.unshift(this.searchKey);
           //去除重复
           this.keyWorldList=[...new Set(this.keyWorldList)];
           //固定长度
           if(this.keyWorldList.length>5){
            this.keyWorldList.splice(this.keyWorldList.length-1,1)
           }
        localStorage.setItem("keyWorldList",JSON.stringify(this.keyWorldList));
            let res=await SearchMusic(this.searchKey)
            console.log(res);
            this.searchList=res.data.result.songs
           this.searchKey="";
            }
          
        },
        DEL:function(){
            localStorage.removeItem("keyWorldList")
            this.keyWorldList=[]
        },
        searchHistory: async function(item){
            let res= await SearchMusic(item);
            console.log(res);
            this.searchList=res.data.result.songs
        },
        updateIndex:function(item){
            // item.al=item.album
            // item.al.picUrl=item.album.artist.img1v1Url
            this.$store.commit("pushPlayList",item)
            this.$store.commit("updatePlayListIndex",this.$store.state.playList.length-1)
        }
    },
};
</script>
<style>
.bigshousuo{
    border: solid 2px ;;
    width: 60%;
    height: 2000px;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
}
.searchTop{
    display: flex;
    align-items: center;
}
.tubiao6{

    width: 70px;
    height:70px ;
}
.input1{
    margin-right: auto;
    margin-left: auto;
    border: 5px solid rgb(5, 88, 78);
    width:200px;
    height: 30px;

}
.history{
position: relative;
    margin-top: 20px;
    height: 100px;
    width: 100%;
}
.searchspan{
    font-size: 30px;
    font-weight: 800;
}
.spankey{
    padding:20px 20px;
    background-color: rgb(216, 208, 208);
    border-radius: 50px;
    display: inline-block;
}
.tubiao66{
    position: absolute;
    width: 50px;
    height: 50px;
    right: 0px;
}
.itemList {
    margin-top: 30px;
  display: flex;
  flex-direction: column;
}

.itemList .item {
  height: 55px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.itemLeft {
  width: 10%;
  height: 100%;
  display: flex;
  align-items: center;
}

/* .leftdingers{
  color: aqua;
} */

.leftSpan {
  display: inline-block;
  width: 30px;
  text-align: center;
}

/* div{
    margin-left: 0.3rem;
} */
.itemLeft p {
  height: 60px;
  width: 227px;
  height: 1px;
  /* overflow: hidden; */
  /* text-overflow: ellipsis; */
  /* white-space: nowrap; */
  font-weight: 700;
}

.leftSpan span {
  font-weight: 400;
  font-size: 12px;
  color: rgb(228, 90, 90);
}

.itemRight {
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
}

.itemRight svg {
  fill: #fff;
}

.liebiao {
  position: absolute;
  right: 0;
}

.leftSpan {
  width: 10%;
  color: rgb(17, 1, 1);
}

.leftname {
  width: 20%;
}

.leftsingers {
  width: 20%;
}

th {
  border: 1px solid rgb(177, 163, 163);
}

.tubiao3 {
  width: 40px;
  height: 40px;
}

</style>